import React, {Component} from 'react';
import {View, Text, Button, ActionSheet} from 'react-native-ui-lib'; //eslint-disable-line
import _ from 'lodash';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestCase, TestSuite} from '@rnoh/testerino';

const useCases = [
  {label: 'Default (Android/iOS)', useNativeIOS: false, icons: false},
  {label: 'Default with icons', useNativeIOS: false, icons: true},
  // {label: 'Native IOS', useNativeIOS: true},
];
const collectionsIcon = require('../../assets/icons/collections.png');
const starIcon = require('../../assets/icons/star.png');
const shareIcon = require('../../assets/icons/share.png');

class ActionSheetScreen extends Component {
  state = {
    showNative: false,
    showCustom: false,
    showCustomIcons: false,
    pickedOption: undefined,
  };

  pickOption(index: string) {
    this.setState({
      pickedOption: index,
    });
  }

  render() {
    const {showCustom, showCustomIcons, showNative, pickedOption} = this.state;
    return (
      <TestSuite name="ActionSheet">
        <TestCase itShould="例子:">
          <View padding-20>
            <View flex padding-25>
              <Text text30>Action Sheet</Text>
              <View left marginT-40>
                {_.map(useCases, (useCase, index) => {
                  return (
                    <Button
                      key={index}
                      link
                      size={Button.sizes.small}
                      text50
                      marginB-10
                      grey10
                      label={`> ${useCase.label}`}
                      onPress={() => {
                        // console.log(useCase, 55)
                        this.setState({
                          showNative: useCase.useNativeIOS,
                          showCustom: !useCase.useNativeIOS && !useCase.icons,
                          showCustomIcons:
                            !useCase.useNativeIOS && useCase.icons,
                        });
                      }}
                    />
                  );
                })}
              </View>
              {!_.isUndefined(pickedOption) && (
                <View>
                  <Text>User picked {pickedOption}</Text>
                </View>
              )}

              <ActionSheet
                title={'showCustom Title'}
                message={'Message of action sheet'}
                cancelButtonIndex={3}
                destructiveButtonIndex={0}
                useNativeIOS={false}
                // migrateDialog
                options={[
                  {
                    label: 'option 1',
                    onPress: () => this.pickOption('option 1'),
                  },
                  {
                    label: 'option 2',
                    onPress: () => this.pickOption('option 2'),
                  },
                  {
                    label: 'option 3',
                    onPress: () => this.pickOption('option 3'),
                  },
                  {label: 'cancel', onPress: () => this.pickOption('cancel')},
                ]}
                visible={showCustom}
                onDismiss={() => this.setState({showCustom: false})}
              />

              <ActionSheet
                title={'showCustomIcons Title'}
                message={'Message of action sheet'}
                cancelButtonIndex={3}
                destructiveButtonIndex={0}
                // migrateDialog
                options={[
                  {
                    label: 'option 1',
                    onPress: () => this.pickOption('option 1'),
                    iconSource: collectionsIcon,
                  },
                  {
                    label: 'option 2',
                    onPress: () => this.pickOption('option 2'),
                    iconSource: shareIcon,
                  },
                  // `icon` prop will be deprecated, please use `iconSource`
                  {
                    label: 'option 3',
                    onPress: () => this.pickOption('option 3'),
                    icon: starIcon,
                  },
                  {label: 'cancel', onPress: () => this.pickOption('cancel')},
                ]}
                visible={showCustomIcons}
                onDismiss={() => this.setState({showCustomIcons: false})}
              />

              <ActionSheet
                title={'showNative Title'}
                message={'Message of action sheet'}
                cancelButtonIndex={3}
                destructiveButtonIndex={0}
                options={[
                  {
                    label: 'option 1',
                    onPress: () => this.pickOption('option 1'),
                  },
                  {
                    label: 'option 2',
                    onPress: () => this.pickOption('option 2'),
                  },
                  {
                    label: 'option 3',
                    onPress: () => this.pickOption('option 3'),
                  },
                  {label: 'cancel', onPress: () => this.pickOption('cancel')},
                ]}
                visible={showNative}
                useNativeIOS
                onDismiss={() => this.setState({showNative: false})}
              />
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default gestureHandlerRootHOC(ActionSheetScreen);
